<template>
  <div class="recharge">
    <header>
      <div class="content">
        <div class="content-title">充值卡号</div>
        <div class="content-dsc">{{cardInfo?cardInfo.cardNo:'--'}}</div>
      </div>
      <div class="content balance">
        <div class="content-title">当前余额</div>
        <div class="content-dsc">￥{{balance ? balance: (Number(balance) === 0 ? '0.0' : '--')}}</div>
      </div>
      <div class="tab-select card">
        <div class="title">请选择充值金额</div>
        <ul class="select-ul">
          <li class="lost-card" v-for="(item, index) in priceList" :key="index">
            <p class="" @click="select(item)"><em>{{item.price}}</em><span>元</span></p>
          </li>
        </ul>
      </div>
      <div class="recharge-record">
        <a @click.stop="goRecordList()">充值/乘车记录</a>
      </div>
    </header>
    <section v-if="false">
      <div class="card custom">
        <div class="title" @click="show = !show"><span>自定义充值金额</span><i class="iconfont" :class="show ? 'show-up' : 'show-down'">&#xe651;</i></div>
        <div class="custom-div" v-show="show">
          <div class="custom-div-title">充值金额</div>
          <div class="ipt">
            <input @blur="blur" v-model.trim="price" type="number" placeholder="请填写充值金额">
            <span>元</span>
          </div>
          <div class="dsc">充值金额需为5的倍数</div>
          <div class="button" :class="{ 'no-click': !price }">
            <button v-if="price" @click="submit">充值</button>
            <button v-else>充值</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<!--充值-->
<script>
  export default {
    name: 'recharge',

    props: {},

    components: {},

    data () {
      return {
        show: false,
        balance: this.$route.params.balance,
        cardInfo: this.$route.params.cardInfo,
        priceList: [],
        price: '',
        selectItem: {}
      }
    },

    mounted () {
      this.getPriceList();
      window['receiveAppMessage'] = (message) => {
        this.orderNo = message.params.orderNo;
        if (message.params.succ) {
          this.$router.replace({
            name: 'paySuccess',
            query: {
              price: message.params.payAmt ? message.params.payAmt : message.params.quantity,
              orderNo: message.params.orderNo
            }
          })
        }
      }
    },

    methods: {
      goRecordList () {
        this.$router.push({name: 'rechargeRecords'})
      },

      blur () {
        if ((this.price && this.price % 5 !== 0) || this.price < 0) {
          this.price = ''
        }
      },
      select (item) {
        this.selectItem = item;
        this.price = '';
        this.recharge();
      },
      submit () {
        this.selectItem = null;
        this.recharge();
      },
      recharge () {
        this.$load.show({
          mask: true
        })
        let priceId = (this.selectItem && this.selectItem.id) ? this.selectItem.id : '';
        let data = {priceId: priceId, price: this.price};
        this.$http.post('/api/qrCode/createOrder',
                data).then(res => {
                  console.log(res)
                  if (res.status === 200) {
                    let data = res.data;
                    console.log(data)
                    pay(data.type, data.amt, data);
                    setTimeout(() => {
                      this.$load.hide();
                    }, 3000)
                  } else {
                    this.$load.hide();
                    this.$toast.show(res.msg);
                  }
                })
      },
      goToPayResult () {
        this.$router.push({
          name: 'payResult'
        })
      },
      getPriceList () {
        this.$load.show({
          mask: true
        })
        this.$http.post('/api/qrCode/getPriceList').then(res => {
          this.$load.hide();
          if (res.status === 200) {
            console.log(res)
            this.priceList = res.data;
          } else {
            this.$toast.show(res.msg)
          }
          this.$load.hide()
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~styles/extends";
  .recharge {
    overflow-y: scroll;
    height: 100%;
    &::-webkit-scrollbar{
      display: none;
    }
    header{
      background: url("../../assets/images/recharge/bg.png") no-repeat;
      background-size: 100% 217px;
      padding: 20px;
      .content{
        color: $theme-white;
        &-title{
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          line-height:20px;
        }
        &-dsc{
          font-size:24px;
          font-weight: bold;
          line-height:33px;
        }
      }
      .balance{
        margin-top: 12px;
      }
      .tab-select{
        margin-top: 20px;
        padding: 20px 16px;
        background: $theme-white;
        .title{
          font-size:16px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          line-height:22px;
          text-align: center;
          padding-bottom: 20px;
        }
        .select-ul{
          display: grid;
          grid-template-columns: repeat(3, 94px);
          grid-gap: 10px;
          li{
            border-radius:4px;
            border:1px solid $theme-blue;
            text-align: center;
            height: 70px;
            p{
              height: 100%;
              @extend %flex-center;
              color: $theme-blue;
              em{
                font-size:24px;
                font-weight: bold;
                line-height:33px;
              }
              span{
                font-size: 16px;
                font-family:PingFangSC-Regular;
                font-weight: 400;
              }
            }
          }
        }
      }
      .recharge-record{
        text-align: center;
        margin-top: 16px;
        a{
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color: $theme-blue;
          line-height:20px;
        }
      }
    }
    section{
      padding: 16px 20px;
      .custom{
        padding: 16px 0;
        .title{
          font-size:16px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(53,61,78,1);
          line-height:22px;
          text-align: center;
          @extend %flex-center;
          i{
            display: inline-block;
            margin-left: 8px;
            font-size: 20px;
          }
          .show-up{
            transform: rotate(-90deg);
          }
          .show-down{
            transform: rotate(90deg);
          }
        }
        &-div{
          padding: 16px 16px 0;
          &-title{
            font-size:14px;
            font-weight: bold;
            line-height:20px;
          }
        }
        .ipt{
          @extend %flex-justify-center-between;
          padding: 16px 0 10px;
          border-bottom: 1px solid $theme-border-color;
          font-size:20px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          line-height:28px;
          span{
            color: $theme-black;
          }
        }
        .dsc{
          margin: 10px 0 20px;
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color: $theme-gray;
          line-height:17px;
        }
      }
    }
  }
</style>
